import dashStyle from './dashboard.module.scss'
import { Card,Row,Col,Calendar, theme } from 'antd';
import defaultHead from '@/assets/defaultHead.png'
import employees from '@/assets/icon-employee.png'
import department from '@/assets/icon-department.png'
import role from '@/assets/icon-role.png'
import permission from '@/assets/icon-permission.png'
import { NavLink } from 'react-router-dom'
import { FileOutlined,FileSearchOutlined,PhoneOutlined,PlusCircleOutlined } from '@ant-design/icons'
const onPanelChange = (value, mode) => {
    console.log(value.format('YYYY-MM-DD'), mode);
  };


export default function Dashboard(){
    const { token } = theme.useToken();
    const wrapperStyle = {
      width: 280,
      border: `1px solid ${token.colorBorderSecondary}`,
      borderRadius: token.borderRadiusLG,
      position: 'absolute',
      left: '3px',
      top: '10px'
    };
    return <div className={dashStyle['dashboard-box']}>
        <div className={dashStyle['left-box']}>
            <Card>
                <div className={dashStyle['user-info']}>
                    <img src={defaultHead} alt="" />
                    <div>
                        <p>江苏传智播客教育科技股份有限公司</p>
                        <p>管理员</p>
                    </div>
                </div>
                <Row gutter={16}>
                    <Col className="gutter-row" span={4}>
                        <div className={dashStyle['user-data']}>
                            <p className={dashStyle['user-data-title']}>组织总人数</p>
                            <p className={dashStyle['user-data-num']}>696</p>
                        </div>
                    </Col>
                    <Col className="gutter-row" span={5}>
                        <div className={dashStyle['user-data']}>
                            <p className={dashStyle['user-data-title']}>正式员工</p>
                            <p className={dashStyle['user-data-num']}>225</p>
                        </div>
                    </Col>
                    <Col className="gutter-row" span={5}>
                        <div className={dashStyle['user-data']}>
                            <p className={dashStyle['user-data-title']}>合同待签署</p>
                            <p className={dashStyle['user-data-num']}>35</p>
                        </div>
                    </Col>
                    <Col className="gutter-row" span={5}>
                        <div className={dashStyle['user-data']}>
                            <p className={dashStyle['user-data-title']}>待入职</p>
                            <p className={dashStyle['user-data-num']}>355</p>
                        </div>
                    </Col>
                    <Col className="gutter-row" span={5}>
                        <div className={dashStyle['user-data']}>
                            <p className={dashStyle['user-data-title']}>本月转正</p>
                            <p className={dashStyle['user-data-num']}>132</p>
                        </div>
                    </Col>
                    <Col className="gutter-row" span={4}>
                        <div className={dashStyle['user-data']}>
                            <p className={dashStyle['user-data-title']}>本月待离职</p>
                            <p className={dashStyle['user-data-num']}>21</p>
                        </div>
                    </Col>
                    <Col className="gutter-row" span={5}>
                        <div className={dashStyle['user-data']}>
                            <p className={dashStyle['user-data-title']}>接口总访问</p>
                            <p className={dashStyle['user-data-num']}>10231</p>
                        </div>
                    </Col>
                </Row>
            </Card>
            <Card className={dashStyle['card-box']}>
                <p>快捷入口</p>
                <Row className={dashStyle['entry-box']} gutter={16}>
                    <Col className="gutter-row" span={6}>
                        <NavLink to='/employees'>
                            <img src={employees} alt="" />
                            <span>员工</span>
                        </NavLink>
                    </Col>
                    <Col className="gutter-row" span={6}>
                        <NavLink to='/department'>
                            <img src={department} alt="" />
                            <span>组织</span>
                        </NavLink>
                    </Col>
                    <Col className="gutter-row" span={6}>
                        <NavLink to='/role'>
                            <img src={role} alt="" />
                            <span>角色</span>
                        </NavLink>
                    </Col>
                    <Col className="gutter-row" span={6}>
                        <NavLink to='/permission'>
                            <img src={permission} alt="" />
                            <span>权限</span>
                        </NavLink>
                    </Col>
                </Row>
            </Card>
            <Card className={dashStyle['card-box']}>
                <p>社保申报数据</p>
                <div className={dashStyle['social-box']}>
                    <div className={dashStyle['social-data']}>
                        <div className={dashStyle['data-total']}>
                            <p>申报人数</p>
                            <p>414</p>
                        </div>
                        <div className={dashStyle['data-class']}>
                            <div>
                                <p>待申报(人)</p>
                                <p>231</p>
                            </div>
                            <div>
                                <p>申报中(人)</p>
                                <p>161</p>
                            </div>
                            <div>
                                <p>已申报(人)</p>
                                <p>22</p>
                            </div>
                        </div>
                    </div>
                    <div>
                        echarts 图表    
                    </div>
                </div>
            </Card>
            <Card className={dashStyle['card-box']}>
                <p>公积金申报数据</p>
                <div className={dashStyle['social-box']}>
                    <div className={dashStyle['social-data']}>
                        <div className={dashStyle['data-total']}>
                            <p>申报人数</p>
                            <p>414</p>
                        </div>
                        <div className={dashStyle['data-class']}>
                            <div>
                                <p>待申报(人)</p>
                                <p>231</p>
                            </div>
                            <div>
                                <p>申报中(人)</p>
                                <p>161</p>
                            </div>
                            <div>
                                <p>已申报(人)</p>
                                <p>22</p>
                            </div>
                        </div>
                    </div>
                    <div>
                        echarts 图表    
                    </div>
                </div>
            </Card>
        </div>
        <div className={dashStyle['right-box']}>
            <div className={dashStyle['right-top-box']}>
                <Card className={dashStyle['right-top-help']}>
                    <p>帮助链接</p>
                    <ul className={dashStyle['right-top-help-list']}>
                        <li className={dashStyle['right-top-help-item']}>
                            <FileOutlined />
                            <span>入门指南</span>
                        </li>
                        <li className={dashStyle['right-top-help-item']}>
                            <FileSearchOutlined /> 
                            <span>在线帮助手册</span>
                        </li>
                        <li className={dashStyle['right-top-help-item']}>
                            <PhoneOutlined />
                            <span>联系技术支持</span>
                        </li>
                        <li className={dashStyle['right-top-help-item']}>
                            <PlusCircleOutlined />
                            <span>添加链接</span>
                        </li>
                    </ul>
                </Card>
                <Card className={dashStyle['right-top-date']}>
                <div style={wrapperStyle}>
                    <Calendar fullscreen={false} onPanelChange={onPanelChange} />
                </div>
                </Card>
            </div>
            <div className={dashStyle['right-footer-box']}>
                <Card>
                    <p>通知公共</p>
                    <div className={dashStyle["information-list"]}>
                        <div className={dashStyle["information-list-item"]}>
                            <img data-v-2c41e98c="" src="https://heimahr.itheima.net/static/img/img.0615818f.jpeg" alt="" />
                            <div>
                                <p>传智 发布了 第1期“传智大讲堂”互动讨论获奖名单</p>
                                <p>2022-11-21 12:01:00</p>
                            </div>
                        </div>
                    </div>
                </Card>
            </div>
        </div>
    </div>
}